<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Javascript · Twitter Bootstrap中文档/中文翻译</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body data-spy="scroll" data-target=".subnav" data-offset="50">


  <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="index.html">Bootstrap</a>
          <div class="nav-collapse">
	    <ul class="nav">
              <li class="">
                <a href="index.html">概述</a>
              </li>
              <li class="">
                <a href="scaffolding.html">框架</a>
              </li>
              <li class="">
                <a href="base-css.html">基础CSS</a>
              </li>
              <li class="">
                <a href="components.html">组件</a>
              </li>
              <li class="active">
                <a href="javascript.html">Javascript插件</a>
              </li>
              <li class="">
                <a href="less.html">使用LESS</a>
              </li>
              <li class="divider-vertical"></li>
              <li class="">
                <a href="download.html">定制</a>
              </li>
              <li class="">
                <a href="examples.html">例子</a>
              </li>
	      <li class="">
                <a href="wrongway.html">译者言</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Masthead
      ================================================== -->
      <header class="jumbotron subhead" id="overview">
        <h1>Bootstrap的Javascript</h1>
        <p class="lead">
	  让Bootstrap的组件变得生动&mdash;提供了12种 <a href="http://jquery.com/" target="_blank">jQuery</a> 组件。
        <div class="subnav">
          <ul class="nav nav-pills">
            <li><a href="javascript.html#javascript">所有插件</a></li>
            <li><a href="javascript.html#modals">对话框</a></li>
            <li><a href="javascript.html#dropdowns">下拉项</a></li>
            <li><a href="javascript.html#scrollspy">滚动侦测</a></li>
            <li><a href="javascript.html#tabs">标签页</a></li>
            <li><a href="javascript.html#tooltips">工具提示</a></li>
            <li><a href="javascript.html#popovers">弹出提示</a></li>
            <li><a href="javascript.html#alerts">通知</a></li>
            <li><a href="javascript.html#buttons">按钮</a></li>
            <li><a href="javascript.html#collapse">折叠</a></li>
            <li><a href="javascript.html#carousel">轮播</a></li>
            <li><a href="javascript.html#typeahead">输入提醒</a></li>
          </ul>
        </div>
      </header>


      <!-- Using Javascript w/ Bootstrap
      ================================================== -->
      <section id="javascript">
        <div class="page-header">
          <h1>jQuery插件 <small>12个Bootstrap插件的简短介绍</small></h1>
        </div>
      <div class="row">
        <div class="span3">
          <label>
            <h3><a href="javascript.html#modals">对话框</a></h3>
            <p>
	      类似传统的javascript模态对话框，但更圆滑更灵活，带有最基本的功能和智能的默认项
	    </p>
          </label>
        </div>
        <div class="span3">
          <label>
            <h3><a href="javascript.html#dropdowns">下拉项</a></h3>
            <p>
	      这个简单的插件几乎可以给Bootstrap的任何组件添加下拉项。
	      Bootstrap为导航栏，标签页和胶囊链接提供完整的下拉菜单特性。
	    </p>
          </label>
        </div>
        <div class="span3">
          <label>
            <h3><a href="javascript.html#scrollspy">滚动侦听</a></h3>
            <p>
	      滚动侦听会根据当前滚动条位置而自动更新导航栏中的链接状态。
	    </p>
          </label>
        </div>
        <div class="span3">
          <label>
            <h3><a href="javascript.html#tabs">可切换的标签页</a></h3>
            <p>
	      该插件通过点击标签页和胶囊链接切换显示不同容器中的内容
	    </p>
          </label>
        </div>
      </div> <!-- /row -->
      <div class="row">
        <div class="span3">
          <label>
            <h3><a href="javascript.html#tooltips">工具提示</a></h3>
            <p>
	      该插件借鉴了jQuery的Tipsy插件，并不依赖于图像&mdash;
	      而是使用CSS3实现动画效果并利用data属性存储本地标题。
	    </p>
          </label>
        </div>
        <div class="span3">
          <label>
            <h3><a href="javascript.html#popovers">弹出提示</a> <small class="muted">*</small></h3>
            <p>
	      与iPad上的效果类似，将存放输助信息的元素显示为弹出框提示。
	    </p>
            <p class="muted"><strong>*</strong> 需要包含 <a href="javascript.html#tooltips">工具提示(Tooltips)</a> </p>
          </label>
        </div>
        <div class="span3">
          <label>
            <h3><a href="javascript.html#alerts">通知消息</a></h3>
            <p>
	      通知插件利用轻巧的类以实现关闭通知框的功能。
	    </p>
          </label>
        </div>
        <div class="span3">
          <label>
            <h3><a href="javascript.html#buttons">按钮</a></h3>
            <p>
	      控制按钮状态或者为其他复合控件(比如工具条)创建按钮组。
	    </p>
          </label>
        </div>
      </div> <!-- /row -->
      <div class="row" style="margin-bottom: 9px;">
        <div class="span3">
          <label>
            <h3><a href="javascript.html#collapse">折叠</a></h3>
            <p>
	      为可折叠的组件(比如手风琴式应用，导航栏)提供基本样式和灵活地支持。
	    </p>
          </label>
        </div>
        <div class="span3">
          <label>
            <h3><a href="javascript.html#carousel">轮播</a></h3>
            <p>
	      创建跑马灯效果，以幻灯片方式展示内容。
	    </p>
          </label>
        </div>
        <div class="span3">
          <label>
            <h3><a href="javascript.html#typeahead">输入提醒</a></h3>
            <p>
	      简单且易于拓展，可迅速地为表单中的文本输入框创建优雅的提示。
	    </p>
          </label>
        </div>
        <div class="span3">
          <label>
            <h3>过渡效果 <small class="muted">*</small></h3>
            <p>对于简单的转场效果，包含 bootstrap-transition.js 文件即可滑入幻灯片或淡出消息框。</p>
            <p class="muted"><strong>*</strong> 需要动画(animation)插件支持</p>
          </label>
        </div>
      </div> <!-- /row -->
      <div class="alert alert-info"><strong>强调！</strong> 所有的javascript插件都需要最新版本的jQuery支持。</div>
    </section>



    <!-- Modal
    ================================================== -->
    <section id="modals">
      <div class="page-header">
        <h1>对话框 <small>bootstrap-modal.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <h3>模态对话框介绍</h3>
          <p>
	    类似传统的javascript模态对话框，但更圆滑更灵活，带有最基本的功能和智能默认项。
	  </p>
          <a href="assets/js/bootstrap-modal.js" target="_blank" class="btn">Download file</a>
        </div>
        <div class="span9 columns">
          <h2>静态的例子</h2>
          <p>下面就是一个静态渲染的模态对话框。</p>
          <div class="well modal-example" style="background-color: #888; border: none;">
            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
              <div class="modal-header">
                <a href="javascript.html#" class="close" data-dismiss="modal">&times;</a>
                <h3>对话框标题</h3>
              </div>
              <div class="modal-body">
                <p>天朝，你好....</p>
              </div>
              <div class="modal-footer">
                <a href="javascript.html#" class="btn">关闭</a>
                <a href="javascript.html#" class="btn btn-primary">保存更改</a>
              </div>
            </div>
          </div> <!-- /well -->

          <h2>动态的例子</h2>
          <p>点击下的按钮会通过javascript触发一个模态对话框。对话框从页面顶端滑下的同时逐渐呈现。</p>
          <!-- sample modal content -->
          <div id="myModal" class="modal hide fade">
            <div class="modal-header">
              <a class="close" data-dismiss="modal" >&times;</a>
              <h3>对话框标题</h3>
            </div>
            <div class="modal-body">
              <h4>对话框文字</h4>
              <p>
		高考临近，湖北孝感惊现史上最刻苦“吊瓶班”。这是昨日孝感市第一高级中学某晚自习教室的一幕，"吊瓶高考班"轰动全校！不知台上的老师面对如此震撼的场面和沁人心脾的药水味，如何站稳脚跟hold住全场呢？该校学生表示，备战高考，补充能量挨几针也是值得的，你hold住了吗？
	      </p>

              <h4>对话框中的弹出提示</h4>
              <p> <a href="javascript.html#" class="btn popover-test" title="花钱买座位" data-content="青岛工学院最近下发通知，将考研自习室772个座位“有偿提供”，5元起售，目前已售出500多个座位。根据采光通风等条件不同，座位每月收费划分为5元、10元、15元、20元、25元五个档次，学生购买时要一次交纳10个月的费用。教务处长称， 为了给学生解决考研复习问题，只好“出此下策”。">学生真不易</a> 把鼠标放上来试试？</p>

              <h4>对话框中的工具提示</h4>
              <p>
		5月1日，济南一名<a href="javascript.html#" class="tooltip-test" title="城管里面也有好人，把他们变成坏人的是恶的制度">城管</a>要对一位抱着三四岁孩子的<a href="javascript.html#" class="tooltip-test" title="小商贩真的很辛苦，不要再欺负辛劳人了">女商贩</a>扣留时候发生争执。争执中女商贩抱着孩子给城管下跪,城管见状也向女商贩跪下。事后城管称，下跪是为了与对方“平等对话”,也怕对孩子心理产生不良影响。
	      </p>

              <hr>

              <h4>对溢出文本使用可选的滚动条</h4>
              <p>
		我们对 <code>.modal-body</code> 样式修正了 <code>max-height</code> 。对于超过高度的内容就会显示滚动条。
	      </p>
              <p>南京街头某家麦当劳门口，一个外国人买了两包薯条，分给乞讨的老奶奶一包，两人席地而坐，开心地吃着聊着。</p>
	      <p>@说书者一枚 ：《帝都日爆》射论：《从麦当劳事件看美国小伙的拙劣表演》：这位美国小伙拙劣的”亲民民主表演“，再次印证了中国的古语“黄鼠狼给鸡拜年没安好心”。这道貌岸然的潜伏”美国政客“，想用糖衣炮弹瓦解坚强的中国无产阶级老奶奶，必定遭到中国人民的唾弃！不要做自取其辱的丑事！（完，完蛋的完） </p>
              <p>4日晚，东莞东城海雅百货前，一女子被偷包，巴西籍男子MOZEN阻止，遭小偷团伙报复群殴。其间数十名路人在场，无人施救。MOZEN说，小偷打他，他觉得正常，可没有任何人帮他，让他觉得不正常，“这个社会是需要互相帮助的，我整天出没在君豪商业中心，中心几乎大部分人都认识我，却没有一个人帮我，这让我觉得很失望，很心寒”。</p>
	      <p>MOZEN说，海雅百货这一带治安很乱，这已经不是他第一次阻止小偷行窃了，早在今年春节前，他就曾扑倒过一个小偷。可有了这一次的经历，如果下回再碰上类似情况，他不会也不敢再帮忙了。</p>
              <p>美国总统富兰克林·罗斯福1942年6月14日美国国旗纪念日广播演讲：“我们所有人都是地球的子孙，有些道理不言而喻，如果我们的兄弟在遭受压迫，我们也将遭受压迫，如果他们在忍饥挨饿，我们也将忍饥挨饿，如果他们的自由权利被剥夺，我们的自由也将不复存在......<a href="http://t.cn/aDoq5K"></a>http://t.cn/aDoq5K</p>
            </div>
            <div class="modal-footer">
              <a href="javascript.html#" class="btn" data-dismiss="modal" >关闭</a>
              <a href="javascript.html#" class="btn btn-primary">保存更改</a>
            </div>
          </div>
          <a data-toggle="modal" href="javascript.html#myModal" class="btn btn-primary btn-large">点击演示</a>

          <hr>



          <h2>使用 bootstrap-modal</h2>

	  <div id="modalbackdroptrue" class="modal hide fade">
            <div class="modal-header">
              <a class="close" data-dismiss="modal" >&times;</a>
              <h3>有遮蔽背景</h3>
            </div>
            <div class="modal-body">
              <h4>backdrop为true</h4>
              <p>
		有遮蔽背景，点击背景即可关闭对话框。
	      </p>
            </div>
            <div class="modal-footer">
              <a href="javascript.html#" class="btn" data-dismiss="modal" >关闭</a>
              <a href="javascript.html#" class="btn btn-primary">保存更改</a>
            </div>
          </div>

	  <div id="modalbackdropfalse" class="modal hide fade">
            <div class="modal-header">
              <a class="close" data-dismiss="modal" >&times;</a>
              <h3>无遮蔽背景</h3>
            </div>
            <div class="modal-body">
              <h4>backdrop为false</h4>
              <p>
		对对话框背景使用 <code>static</code> ，无遮蔽，不支持背景click关闭对话框。
	      </p>
            </div>
            <div class="modal-footer">
              <a href="javascript.html#" class="btn" data-dismiss="modal" >关闭</a>
              <a href="javascript.html#" class="btn btn-primary">保存更改</a>
            </div>
          </div>

	  <div id="modalkeyboardtrue" class="modal hide fade">
            <div class="modal-header">
              <a class="close" data-dismiss="modal" >&times;</a>
              <h3>按ESC键关闭对话框</h3>
            </div>
            <div class="modal-body">
              <h4>keyboard为true</h4>
              <p>
		按ESC可以关闭对话框，按ESC试试
	      </p>
            </div>
            <div class="modal-footer">
              <a href="javascript.html#" class="btn" data-dismiss="modal" >关闭</a>
              <a href="javascript.html#" class="btn btn-primary">保存更改</a>
            </div>
          </div>

	  <div id="modalkeyboardfalse" class="modal hide fade">
            <div class="modal-header">
              <a class="close" data-dismiss="modal" >&times;</a>
              <h3>按ESC键无法关闭对话框</h3>
            </div>
            <div class="modal-body">
              <h4>keyboard为false</h4>
              <p>
		按ESC不能关闭对话框，按ESC试试
	      </p>
            </div>
            <div class="modal-footer">
              <a href="javascript.html#" class="btn" data-dismiss="modal" >关闭</a>
              <a href="javascript.html#" class="btn btn-primary">保存更改</a>
            </div>
          </div>

	  <div id="modaltoggle" class="modal hide" data-backdrop='false'>
            <div class="modal-header">
              <a class="close" data-dismiss="modal" >&times;</a>
              <h3>手动触发/关闭对话框</h3>
            </div>
            <div class="modal-body">
              <h4>手动触发/关闭</h4>
              <p>
		再点击一次按钮就会关闭对话框
	      </p>
            </div>
            <div class="modal-footer">
              <a href="javascript.html#" class="btn" data-dismiss="modal" >关闭</a>
              <a href="javascript.html#" class="btn btn-primary">保存更改</a>
            </div>
          </div>

          <p>通过javascript调用模态对话框：</p>
          <pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
          <h3>选项(options)</h3>
	  <pre class="prettyprint linenums">
$('#myModal').modal({
    backdrop:true,
    keyboard:true,
    show:true
});</pre>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 100px;">名称</th>
               <th style="width: 50px;">类型</th>
               <th style="width: 50px;">默认</th>
               <th>描述</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>backdrop</td>
               <td>布尔值</td>
               <td>true</td>
               <td>
		 为true时，显示对话框的遮蔽背景，鼠标点击背景即可关闭对话框。<a class="btn btn-primary btn-mini" id="backdroptrue">点击演示</a> <br />
		 为false时，无背景。<a class="btn btn-primary btn-mini" id="backdropfalse">点击演示</a>
	       </td>
             </tr>
             <tr>
               <td>keyboard</td>
               <td>布尔值</td>
               <td>true</td>
               <td>
		 为true时按下ESC键关闭模态对话框。<a class="btn btn-primary btn-mini" id="keyboardtrue">点击演示</a><br />
		 为false时无效。<a class="btn btn-primary btn-mini" id="keyboardfalse">点击演示</a>
	       </td>
             </tr>
             <tr>
               <td>show</td>
               <td>布尔值</td>
               <td>true</td>
               <td>是否在初始化时显示对话框。</td>
             </tr>
            </tbody>
          </table>
          <h3>标记</h3>
          <p>
	    我们无须手写javascript即可在页面中触发对话框。只要在某个激发元素上设置 <code>data-toggle="modal"</code> ，然后将
	     <code>data-target="#foo"</code> 或 <code>href="#foo"</code> 设为某个对话框元素的id，这样点击激发元素就会弹出对话框。
	  </p>
	  <pre class="prettyprint linenums">&lt;a class="btn" data-toggle="modal" href="#myModal" &gt;点击触发对话框&lt;/a&gt;</pre>
          <p>
	    如果需要带选项的对话框，可以在激发元素或是对话框元素的data-属性中设置选项值。
	    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-keyboard="false" data-backdrop="false">点击"无ESC关闭，无遮蔽背景"演示</a>
	    <pre class="prettyprint linenums">&lt;a class="btn" data-toggle="modal" href="#myModal"  data-keyboard="false" data-backdrop="false" &gt;点击"无ESC关闭，无遮蔽背景"演示&lt;/a&gt;</pre>
	  </p>


<pre class="prettyprint linenums">
&lt;div class="modal" id="myModal"&gt;
  &lt;div class="modal-header"&gt;
    &lt;a class="close" data-dismiss="modal"&gt;&times;&lt;/a&gt;
    &lt;h3&gt;对话框标题&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    &lt;p&gt;对话框内容&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;a href="#" class="btn"&gt;关闭&lt;/a&gt;
    &lt;a href="#" class="btn btn-primary"&gt;保存更新&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
          <div class="alert alert-info">
            <strong>强调！</strong>
	    要实现对话框显示与消隐时的动画效果，必须包含 bootstrap-transition.js.，再对 <code>.modal</code> 元素应用 <code>.fade</code> ，即可实现淡入淡出。
          </div>
          <h3>方法</h3>
          <h4>.modal(options)</h4>
          <p>将某个元素变成对话框激活，接受一个 <code>object</code> 做为可选参数。</p>
<pre class="prettyprint linenums">
$('#myModal').modal({
  keyboard: false
})</pre>
          <h4>.modal('toggle')</h4>
          <p>手动切换对话框打开和关闭。<a class="btn btn-primary btn-mini" id="amodaltoggle">点击演示</a></p>
          <pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
          <h4>.modal('show')</h4>
          <p>打开对话框</p>
          <pre class="prettyprint linenums">$('#myModal').modal('show')</pre>
          <h4>.modal('hide')</h4>
          <p>关闭对话框</p>
          <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
          <h3>事件</h3>
          <p>
	    Bootstrap的对话框类扩展了一组事件，可以介入对话框的某些功能实现。
	  </p>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 150px;">事件</th>
               <th>描述</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>show</td>
               <td>
		 该事件在调用 <code>show</code> 方法时立刻触发。
	       </td>
             </tr>
             <tr>
               <td>shown</td>
               <td>
		 该事件在对话框已经呈现给用户后（要等CSS过渡效果生效后）触发。
	       </td>
             </tr>
             <tr>
               <td>hide</td>
               <td>
		 该事件在对话框使用 <code>hide</code> 方法时立刻触发。
	       </td>
             </tr>
             <tr>
               <td>hidden</td>
               <td>
		 该事件在对话框已经关闭后（要等CSS过渡效果生效后）触发。
	       </td>
             </tr>
            </tbody>
          </table>

<pre class="prettyprint linenums">
$('#myModal').on('hidden', function () {
  // do something…
})</pre>
        </div>
      </div>
    </section>



    <!-- Dropdown
    ================================================== -->
    <section id="dropdowns">
      <div class="page-header">
        <h1>下拉项 <small>bootstrap-dropdown.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <h3>下拉项介绍</h3>
          <p>
	    这个简单的插件几乎可以给Bootstrap的任何组件添加下拉项。 Bootstrap导为航栏，标签页和胶囊链接提供完整的下拉菜单特性。
	  </p>
          <a href="assets/js/bootstrap-dropdown.js" target="_blank" class="btn">下载文件</a>
        </div>
        <div class="span9 columns">
          <h2>例子</h2>
          <p>
	    点击下面的导航栏链接和胶囊链接以测试下拉项。
	  </p>
          <div id="navbar-example" class="navbar navbar-static">
            <div class="navbar-inner">
              <div class="container" style="width: auto;">
                <a class="brand" href="javascript.html#">项目名称</a>
                <ul class="nav">
                  <li class="dropdown">
                    <a href="javascript.html#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="javascript.html#">动作</a></li>
                      <li><a href="javascript.html#">另一个动作</a></li>
                      <li><a href="javascript.html#">其他</a></li>
                      <li class="divider"></li>
                      <li><a href="javascript.html#">另一个链接</a></li>
                    </ul>
                  </li>
                  <li class="dropdown">
                    <a href="javascript.html#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="javascript.html#">动作</a></li>
                      <li><a href="javascript.html#">另一个动作</a></li>
                      <li><a href="javascript.html#">其他</a></li>
                      <li class="divider"></li>
                      <li><a href="javascript.html#">另一个链接</a></li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav pull-right">
                  <li id="fat-menu" class="dropdown">
                    <a href="javascript.html#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="javascript.html#">动作</a></li>
                      <li><a href="javascript.html#">另一个动作</a></li>
                      <li><a href="javascript.html#">其他</a></li>
                      <li class="divider"></li>
                      <li><a href="javascript.html#">另一个链接</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div> <!-- /navbar-example -->

          <ul class="nav nav-pills">
            <li class="active"><a href="javascript.html#">规则的链接</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="javascript.html#">下拉 <b class="caret"></b></a>
              <ul id="menu1" class="dropdown-menu">
		<li><a href="javascript.html#">动作</a></li>
                <li><a href="javascript.html#">另一个动作</a></li>
                <li><a href="javascript.html#">其他</a></li>
                <li class="divider"></li>
                <li><a href="javascript.html#">另一个链接</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="javascript.html#">下拉 <b class="caret"></b></a>
              <ul id="menu2" class="dropdown-menu">
		<li><a href="javascript.html#">动作</a></li>
                <li><a href="javascript.html#">另一个动作</a></li>
                <li><a href="javascript.html#">其他</a></li>
                <li class="divider"></li>
                <li><a href="javascript.html#">另一个链接</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="javascript.html#">下拉 <b class="caret"></b></a>
              <ul id="menu3" class="dropdown-menu">
		<li><a href="javascript.html#">动作</a></li>
                <li><a href="javascript.html#">另一个动作</a></li>
                <li><a href="javascript.html#">其他</a></li>
                <li class="divider"></li>
                <li><a href="javascript.html#">另一个链接</a></li>
              </ul>
            </li>
          </ul> <!-- /tabs -->

          <hr>

          <h2>使用bootstrap-dropdown.js</h2>
          <p>通过javascript调用下拉项：</p>
          <pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre>
          <h3>标记</h3>
          <p>
	    包含bootstrap-dropdown.js，然后设置 <code>data-toggle="dropdown"</code> 可以为任何元素添加并激活下拉项
	  </p>
          <div class="alert alert-info">
            <strong>强调！</strong>
	    可以使用 <code>data-target="#id"</code> 或 <code>href="#id"</code> 激活某个下拉项，如下
          </div>
	  <ul class="nav nav-pills">
	    <li><a href="javascript.html#">规则的链接</a></li>
	    <li class="dropdown" id="menutest1">
	      <a class="dropdown-toggle" data-toggle="dropdown" href="javascript.html#menutest1">
		下拉项
		<b class="caret"></b>
	      </a>
	      <ul class="dropdown-menu">
		<li><a href="javascript.html#">动作</a></li>
		<li><a href="javascript.html#">另一个动作</a></li>
		<li><a href="javascript.html#">其他</a></li>
		<li class="divider"></li>
		<li><a href="javascript.html#">被间隔的链接</a></li>
	      </ul>
	    </li>
	    <li  class='active'>
	      <a data-toggle="dropdown" href="javascript.html#menutest1">
		点击我看看
	      </a>
	    </li>

	  </ul>



<pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt;
  &lt;li&gt;&lt;a href="#"&gt;规则的链接&lt;/a&gt;&lt;/li&gt;
  &lt;li class="dropdown" id="menutest1"&gt;
    &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menutest1"&gt;
      下拉项
      &lt;b class="caret"&gt;&lt;/b&gt;
    &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;动作&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;另一个动作&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;其他&lt;/a&gt;&lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;被间隔的链接&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class='active'&gt;
    &lt;a data-toggle="dropdown" href="#menutest1"&gt;点击我看看&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</pre>
          <h3>方法</h3>
          <h4>$().dropdown()</h4>
          <p>用于激活某个导航条/标签页导航栏下的菜单</p>
        </div>
      </div>
    </section>



   <!-- ScrollSpy
    ================================================== -->
    <section id="scrollspy">
      <div class="page-header">
        <h1>滚动侦测 <small>bootstrap-scrollspy.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <p>滚动侦测会根据当前滚动条位置而自动更新导航栏中的链接状态。</p>
          <a href="assets/js/bootstrap-scrollspy.js" target="_blank" class="btn">下载文件</a>
        </div>
        <div class="span9 columns">
          <h2>使用滚动侦测的导航条例子</h2>
          <p>
	    滚动下面的内容区域，然后观察导航条状态，导航条中的菜单甚至下拉项都会同步高亮。试一下！
	  </p>
          <div id="navbarExample" class="navbar navbar-static">
            <div class="navbar-inner">
              <div class="container" style="width: auto;">
                <a class="brand" href="javascript.html#">项目名称</a>
                <ul class="nav">
                  <li><a href="javascript.html#fat">红利</a></li>
                  <li><a href="javascript.html#mdo">哈芬</a></li>
                  <li class="dropdown">
                    <a href="javascript.html#" class="dropdown-toggle" data-toggle="dropdown">党国大事 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="javascript.html#one">遛狗</a></li>
                      <li><a href="javascript.html#two">失踪</a></li>
                      <li class="divider"></li>
                      <li><a href="javascript.html#three">耳光</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">
            <h4 id="fat">红利</h4>
            <p>
            中方向美方承诺提高国有企业红利上缴比例，增加上缴利润的中央国企和省级国企的数量，将国有资本经营预算纳入国家预算体系。还承诺，鼓励包括国有公司在内的上市公司增加红利支付。还承诺在信贷提供、税收优惠和监管政策等方面对各类所有制企业一视同仁。<br /><br />

	    美方认为，提高国有企业分红比例带来的收入可用于资助政府的社保和养老开支，从而有可能降低中国人大量储蓄的必要性，让他们提高消费支出，从而达到刺激中国内需的目的。
            </p>
            <h4 id="mdo">哈芬</h4>
            <p>
	      据估，中国高铁槽道市场约十几亿元，德国哈芬占70%。业内人士称，中铁设计院的铁道图纸，直接指定使用哈芬，而非技术标准。哈芬在德国使用成本高昂的不锈钢，在中国则是碳钢。更有业内人士证实，目前中国高铁用的实为国内生产，原产几乎不足四分之一。（财新）
            </p>
            <h4 id="one">遛狗</h4>
            <p>
	      近日，拍摄于四川绵阳街头的一张照片引起热议，一辆在路上行驶的法院警车，车窗里伸出一个宠物狗的脑袋，四处张望。此情景被怀疑是公务人员私用警车带宠物狗兜风。经调查得知，这是我国新近引进的一批特殊品种警犬，为麻痹犯罪分子，故意化妆成宠物狗的样子。
            </p>
            <h4 id="two">失踪</h4>
            <p>
	      4月25日，19岁的韩耀在云南省昆明市晋宁县晋城镇南门村鑫云冷库附近失踪。家属在寻找时，竟然发现这一区域已先后有8名青少年失踪，其中近一年内就有6人。有一名青年雷玉生就在此地的大街上被人拖进了一面包车，被扔进黑砖窑强迫劳动，后逃离黑砖窑重获自由。
            </p>
            <h4 id="three">耳光</h4>
            <p>
	      30多岁女人直接吐东西在刚扫过的地上，环卫大姐上去说了两句，结果挨了三巴掌三脚。见到被打的环卫大姐时，她精神不好，坐在凳子上不说话，左脸的伤痕还很显眼，工友在一旁照料她。2012年5月4日，浙江省，杭州市。
            </p>
            <p>
	      尹大姐说：“小孩子都知道不能在街上乱吐。”那女人说：那不就是你们环卫应该做的事情吗？尹大姐说：难道我们环卫工人就低人一等吗？”话音刚落，“啪”“啪”“啪”三个巴掌落在尹大姐脸上。
            </p>
          </div>
          <hr>
          <h2>使用bootstrap-scrollspy.js</h2>
          <p>通过javascript调用滚动侦测：</p>
          <pre class="prettyprint linenums">$('#navbar').scrollspy()</pre>
          <h3>标记</h3>
          <p>
	    在想侦测的元素(往往是body)上添加 <code>data-spy="scroll"</code> 就很容易在置顶导航条上实现滚动侦测。
	  </p>
          <pre class="prettyprint linenums">&lt;body data-spy="scroll" &gt;...&lt;/body&gt;</pre>
          <div class="alert alert-info">
            <strong>强调！</strong>
	    导航条链接必须指向一个可解析的元素id。举个例子，导航中的 <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> 必须对应着dom中一个真实存在的id='home'元素，比如 <code>&lt;div id="home"&gt;&lt;/div&gt;</code> 。
          </div>
          <h3>选项</h3>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 100px;">名称</th>
               <th style="width: 100px;">类型</th>
               <th style="width: 50px;">默认</th>
               <th>描述</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>offset</td>
               <td>数字</td>
               <td>10</td>
               <td>计算滚动位置时相对顶端的偏移量</td>
             </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>



    <!-- Tabs
    ================================================== -->
    <section id="tabs">
      <div class="page-header">
        <h1>可切换的标签页 <small>bootstrap-tab.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <p>
	    该插件通过点击标签页和胶囊链接切换显示不同容器中的内容。
	  </p>
          <a href="assets/js/bootstrap-tab.js" target="_blank" class="btn">下载文件</a>
        </div>
        <div class="span9 columns">
          <h2>标签页例子</h2>
          <p>
	    点击下面的标签(包括下拉菜单项)切换显示不同面板中的内容。
	  </p>
          <ul id="tab" class="nav nav-tabs">
            <li class="active"><a href="javascript.html#home" data-toggle="tab">首页</a></li>
            <li><a href="javascript.html#profile" data-toggle="tab">介绍</a></li>
            <li class="dropdown">
              <a href="javascript.html#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="javascript.html#dropdown1" data-toggle="tab">智慧</a></li>
                <li><a href="javascript.html#dropdown2" data-toggle="tab">夜壶</a></li>
              </ul>
            </li>
          </ul>
          <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="home">
              <p>
		5月6日，北京，一对新人启用直升机接亲。该直升机是欧洲直升机公司系列，机型为AS350B3，该公司北京唯一可承接低空飞行业务的航空公司，此次为首次承接婚礼。据悉，首次空中婚礼总费用为5万元。定价包括飞行时间和申报审批等费用，飞行时间按照1小时3万元计算。
	      </p>
            </div>
            <div class="tab-pane fade" id="profile">
              <p>
		法国代表社会党参选的奥朗德今晨在大选中获得胜利，成为法兰西第五共和国第七位总统，法国也在17年之后迎来首位左翼总统。萨科齐在5年任内因政绩不佳引发不满，选前处于民调落后的劣势。萨科齐虽试图打造“危机总统”形象，但终未能实现逆转。奥朗德现年58岁，至今未婚，与社会党前总统选举候选人罗亚尔同居30多年，育有4子女，多年来坚持骑车上下班。对华关系持强硬立场。
	      </p>
            </div>
            <div class="tab-pane fade" id="dropdown1">
              <p>
		平壤某鱼肉样板店经理日云硕（音），在去年金正日和金正恩来店视察时，曾目睹这样一幕：金正恩将父亲让进电梯，然后自己嗖嗖地爬上三层楼梯，电梯再次打开时，他立正向父亲致意。日云硕动情地回忆说：“我被他的忠诚与智慧折服了...”
	      </p>
            </div>
            <div class="tab-pane fade" id="dropdown2">
              <p>
		不是政府人士，永远不要去做政府的吹鼓手，因为吹鼓手在政府眼里永远只值一个夜壶铜钿，尿急了拿出来用一下，用完了将夜壶放到最角落地方；你吹得越起劲，不仅公众看不起你，政府更看不起你，所以吹鼓手都没有好下场。-----杜月笙
	      </p>
            </div>
          </div>
          <hr>
          <h2>使用bootstrap-tab.js</h2>
          <p>通过javascript启动可切换的标签页：</p>
          <pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
          <h3>标记</h3>
          <p>
	    在某个元素上设置 <code>data-toggle="tab"</code> 或 <code>data-toggle="pill"</code> 而无须编写javascript，就可以激活标签页或是胶囊链接
	  </p>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs"&gt;
  &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;首页&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;介绍&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;消息&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;设置&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
          <h3>方法</h3>
          <h4>$().tab</h4>
          <p>
	    激活一个标签页元素和内容容器。标签页应该含有 <code>data-target='#id'</code> 或 <code>href='#id'</code> 属性以指向dom中的某个容器节点。
          </p>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs"&gt;
  &lt;li class="active"&gt;&lt;a href="#home"&gt;首页&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#profile"&gt;介绍&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#messages"&gt;消息&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#settings"&gt;设置&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="tab-content"&gt;
  &lt;div class="tab-pane active" id="home"&gt;...&lt;/div&gt;
  &lt;div class="tab-pane" id="profile"&gt;...&lt;/div&gt;
  &lt;div class="tab-pane" id="messages"&gt;...&lt;/div&gt;
  &lt;div class="tab-pane" id="settings"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
  $(function () {
    $('.tabs a:last').tab('show')
  })
&lt;/script&gt;</pre>
          <h3>事件</h3>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 150px;">事件</th>
               <th>描述</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>show</td>
               <td>
		 该事件在标签开始展示时（尚未渲染完之前）触发。
		  <code>event.target</code>  指向要激活的标签， <code>event.relatedTarget</code> 提向之前已激活的标签（如果有的话）。
	       </td>
            </tr>
            <tr>
               <td>shown</td>
               <td>
		 该事件在标签已经呈现后（已渲染完成）触发。
		  <code>event.target</code>  指向要激活的标签， <code>event.relatedTarget</code> 提向之前已激活的标签（如果有的话）。
	       </td>
             </tr>
            </tbody>
          </table>

          <pre class="prettyprint linenums">
$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})</pre>
       </div>
      </div>
    </section>


    <!-- Tooltips
    ================================================== -->
    <section id="tooltips">
      <div class="page-header">
        <h1>工具提示 <small>bootstrap-tooltip.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <h3>工具提示介绍</h3>
          <p>
	    受Jason Frame所写的出色的jQuery.tipsy插件所启发，我们编写了工具提示。做为前者的升级版，工具提示不依赖于图像，
	    使用css3显示动画效果，利用data-属性对标题做本地化存储。
	  </p>
          <a href="assets/js/bootstrap-tooltip.js" target="_blank" class="btn">下载文件</a>
        </div>
        <div class="span9 columns">
          <h2>工具提示的用例</h2>
          <p>鼠标经过下面链接时显示工具提示：</p>
          <div class="tooltip-demo well">
            <p class="muted" style="margin-bottom: 0;">
	      “这是我的第一次英文访问,很抱歉它不够严谨,但是我不得不这么做,不只因为采访时间限制，更因为我面对的是卡梅隆，这个人喜爱挑战、从无畏惧，他也希望别人如此，他可以原谅不完美，但他无法接受一个人不去努力接近自己的极限。”
	      ——<a href="javascript.html#" rel="tooltip" title="柴静始终站在离新闻最近的地方，她以她的犀利和敏锐、坚定与坚持，最终历练成为一名优秀的新闻工作者。 ">柴静</a>《看见》专访<a href="javascript.html#" rel="tooltip" title="1954年8月16日生于加拿大的著名电影导演，擅长拍摄动作片以及科幻电影。">卡梅隆</a>
            </p>
          </div>
          <hr>
          <h2>使用bootstrap-tooltip.js</h2>
          <p>通过javascript触发工具提示：</p>
          <pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
          <h3>选项</h3>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 100px;">名称</th>
               <th style="width: 100px;">类型</th>
               <th style="width: 50px;">默认</th>
               <th>描述</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>animation</td>
               <td>布尔值</td>
               <td>true</td>
               <td>
		 为工具提示添加一个淡入的过渡。
	       </td>
             </tr>
             <tr>
               <td>placement</td>
               <td>字符串或函数</td>
               <td>'top'</td>
               <td>
		 工具提示的位置：top | bottom | left | right。
	       </td>
             </tr>
             <tr>
               <td>selector</td>
               <td>字符串</td>
               <td>false</td>
               <td class="tooltip-demo">
		 如果提供了selector，将对符合条件的某个或多个元素启用工具提示。
	       </td>
             </tr>
             <tr>
               <td>title</td>
               <td>字符串或函数</td>
               <td>''</td>
               <td>如果'title'属性不存在的话，就使用该值做为默认的标题。</td>
             </tr>
             <tr>
               <td>trigger</td>
               <td>字符串</td>
               <td>'hover'</td>
               <td>工具提示的触发方式：鼠标经过(hover) | 获得焦点(focus) | 手动触发(manual)</td>
             </tr>
             <tr>
               <td>delay</td>
               <td>数字或对象</td>
               <td>0</td>
               <td>
                <p>显示和隐藏时的延迟时间(以毫秒计)</p>
                <p>如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。</p>
                <p>如果是一个对象，其结构就是: <code>delay: { show: 500, hide: 100 }</code></p>
               </td>
             </tr>
            </tbody>
          </table>
          <div class="alert alert-info">
            <strong>强调！</strong>
	    每个工具提示都可以单独通过设置data-属性以实现与javascript调用同样的功能
          </div>
          <h3>标记</h3>
          <p>
	    出于性能的考虑，在使用工具提示和弹出提示时建议利用data-属性，再指定一个selector选项即可。
	  </p>
<pre class="prettyprint linenums">
&lt;a href="#" rel="tooltip" title="first tooltip"&gt;鼠标经过时生效&lt;/a&gt;
</pre>
          <h3>方法</h3>
          <h4>$().tooltip(options)</h4>
          <p>
	    对某个元素集合添加工具提示的处理。
	  </p>
          <h4>.tooltip('show')</h4>
          <p>显示某个元素的工具提示。</p>
          <pre class="prettyprint linenums">$('#element').tooltip('show')</pre>
          <h4>.tooltip('hide')</h4>
          <p>隐藏某个元素的工具提示。</p>
          <pre class="prettyprint linenums">$('#element').tooltip('hide')</pre>
          <h4>.tooltip('toggle')</h4>
          <p>切换某个元素的工具提示的隐藏和显示状态。</p>
          <pre class="prettyprint linenums">$('#element').tooltip('toggle')</pre>
        </div>
      </div>
    </section>



    <!-- Popovers
    ================================================== -->
    <section id="popovers">
      <div class="page-header">
        <h1>弹出提示 <small>bootstrap-popover.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <h3>弹出提示介绍</h3>
          <p>
	    与iPad上的效果类似，把存放输助信息的元素显示为弹出框提示。
	  </p>
          <p class="muted"><strong>*</strong> 需要包含 <a href="javascript.html#tooltips">Tooltip</a> 。</p>
          <a href="assets/js/bootstrap-popover.js" target="_blank" class="btn">下载文件</a>
        </div>
        <div class="span9 columns">
          <h2>鼠标经过时的弹出提示例子</h2>
          <p>鼠标经过按钮时切换弹示提示的显示/隐藏。</p>
          <div class="well">
            <a href="javascript.html#" class="btn btn-danger" rel="popover" title="他是谁" data-content="他来自山东，是一名残疾人，因思想独立、指谪政弊而被政府迫害。地方政府和当权政要派专人看管他，调拨专款作为对他的看管费用，他每天都活在别人的监视和囚禁中，其遭遇只能用令人发指来形容。历尽万难，他终于成功逃离了当地，在外国使节的帮助和护送下去到了国外。他，就是孙膑。">鼠标经过弹出提示</a>
          </div>
          <hr>
          <h2>使用 bootstrap-popover.js</h2>
          <p>使用javascript启用弹出提示：</p>
          <pre class="prettyprint linenums">$('#example').popover(options)</pre>
          <h3>选项</h3>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 100px;">名称</th>
               <th style="width: 100px;">类型</th>
               <th style="width: 50px;">默认</th>
               <th>描述</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>animation</td>
               <td>布尔值</td>
               <td>true</td>
               <td>
		 为弹出提示添加一个淡入的过渡。
	       </td>
             </tr>
             <tr>
               <td>placement</td>
               <td>字符串或函数</td>
               <td>'right'</td>
               <td>
		 弹出提示的位置：top | bottom | left | right。
	       </td>
             </tr>
             <tr>
               <td>selector</td>
               <td>字符串</td>
               <td>false</td>
               <td>
		 如果提供了selector，将对符合条件的某个或多个元素启用工具提示。
	       </td>
             </tr>
             <tr>
               <td>trigger</td>
               <td>字符串</td>
               <td>'hover'</td>
               <td>
		 弹出提示的触发方式：鼠标经过(hover) | 获得焦点(focus) | 手动触发(manual)
	       </td>
             </tr>
             <tr>
               <td>title</td>
               <td>字符串或函数</td>
               <td>''</td>
               <td>
		 如果元素没有指定'title'属性，就使用该值做为默认的标题。
	       </td>
             </tr>
             <tr>
               <td>content</td>
               <td>字符串或函数</td>
               <td>''</td>
               <td>
		 如果元素没有指定'data-content'属性，就使用该值做为默认的内容。
	       </td>
             </tr>
             <tr>
               <td>delay</td>
               <td>数字或对象</td>
               <td>0</td>
               <td>
		 <p>显示和隐藏时的延迟时间(以毫秒计)</p>
                 <p>如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。</p>
                 <p>如果是一个对象，其结构就是: <code>delay: { show: 500, hide: 100 }</code></p>
               </td>
             </tr>
            </tbody>
          </table>
          <div class="alert alert-info">
            <strong>强调！</strong>
	    每个弹出提示都可以单独通过设置data-属性以实现与javascript调用同样的功能
          </div>
          <h3>标记</h3>
          <p>
	    每个工具提示都可以单独通过设置data-属性以实现与javascript调用同样的功能
          </p>
          <h3>方法</h3>
          <h4>$().popover(options)</h4>
          <p>
	    对某个元素集合添加弹出提示。
	  </p>
          <h4>.popover('show')</h4>
          <p>
	    显示某个元素的弹出提示。
	  </p>
          <pre class="prettyprint linenums">$('#element').popover('show')</pre>
          <h4>.popover('hide')</h4>
          <p>
	    隐藏某个元素的弹出提示。
	  </p>
          <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
          <h4>.popover('toggle')</h4>
          <p>
	    切换某个元素的弹出提示的隐藏和显示状态。
	  </p>
          <pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
        </div>
      </div>
    </section>



    <!-- Alert
    ================================================== -->
    <section id="alerts">
      <div class="page-header">
        <h1>通知消息 <small>bootstrap-alert.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <h3>通知消息介绍</h3>
          <p>
	    通知插件使用轻巧的类以实现关闭通知框的功能。
	  </p>
          <a href="assets/js/bootstrap-alert.js" target="_blank" class="btn">下载文件</a>
        </div>
        <div class="span9 columns">
          <h2>通知的的例子</h2>
          <p>
	    通知插件用在规则的通知消息或块状消息上。
	  </p>
          <div class="alert fade in">
            <a class="close" data-dismiss="alert" href="javascript.html#">&times;</a>
            <strong>警告！</strong> 在贵国遵守宪法就要违反刑法。
          </div>
          <div class="alert alert-block alert-error fade in">
            <a class="close" data-dismiss="alert" href="javascript.html#">&times;</a>
            <h4 class="alert-heading">微博控们注意了！</h4>
            <p>
	      出游微博晒幸福时，最好不要泄露出游时间、人数，别泄露住址，谨慎晒出游照片，以免让贼判断出你家是否有人。因为小偷说不定会盯上你的微博，“随着微博的发展，贼也很时尚啊！”
	    </p>
            <p>
              <a class="btn btn-danger" href="javascript.html#">接受建议</a> <a class="btn" href="javascript.html#">不当回事</a>
            </p>
          </div>
          <hr>
          <h2>使用 bootstrap-alert.js</h2>
          <p>通过javascript触发通知：</p>
          <pre class="prettyprint linenums">$(".alert").alert()</pre>
          <h3>标记</h3>
          <p>
	    只须对关闭按钮添加 <code>data-dismiss="alert"</code> 就会自动实现一个通知的关闭功能。
	  </p>
          <pre class="prettyprint linenums">&lt;a class="close" data-dismiss="alert" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
          <h3>方法</h3>
          <h4>$().alert()</h4>
          <p>
	    对所有通知消息赋予关闭功能。在要关闭时使用动画效果，就要在通知上应用 <code>.fade</code> 和 <code>.in</code> 。
	  </p>
          <h4>.alert('close')</h4>
          <p>关闭通知</p>
          <pre class="prettyprint linenums">$(".alert").alert('close')</pre>
          <h3>事件</h3>
          <p>
	    Bootstrap的通知类扩展了一组事件，可以介入通知的某些功能实现。
	  </p>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 150px;">事件</th>
               <th>描述</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>close</td>
               <td>在调用 <code>close</code> 方法时立刻触发。</td>
             </tr>
             <tr>
               <td>closed</td>
               <td>
		 在通知已经关闭后（等待css过渡效果完成）触发。
	       </td>
             </tr>
            </tbody>
          </table>
<pre class="prettyprint linenums">
$('#my-alert').bind('closed', function () {
  // do something…
})</pre>
        </div>
      </div>
    </section>



    <!-- Buttons
    ================================================== -->
    <section id="buttons">
      <div class="page-header">
        <h1>按钮 <small>bootstrap-button.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <h3>按钮介绍</h3>
          <p>
	    控制按钮的状态或者为其他复合控件(比如工具条)创建按钮组。
	  </p>
          <a href="assets/js/bootstrap-button.js" target="_blank" class="btn">下载文件</a>
        </div>
        <div class="span9 columns">
          <h2>例子</h2>
          <p>使用按钮插件触发开关和更改状态。</p>
          <table class="table table-bordered table-striped">
            <tbody>
             <tr>
               <td>状态</td>
               <td>
                  <button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
                    载入状态
                  </button>
                </td>
             </tr>
             <tr>
               <td>单独开关</td>
               <td>
                  <button class="btn btn-primary" data-toggle="button">单独开关</button>
                </td>
             </tr>
             <tr>
               <td>复选</td>
               <td>
                  <div class="btn-group" data-toggle="buttons-checkbox">
                    <button class="btn btn-primary">左</button>
                    <button class="btn btn-primary">中</button>
                    <button class="btn btn-primary">右</button>
                  </div>
               </td>
             </tr>
             <tr>
               <td>单选</td>
               <td>
                  <div class="btn-group" data-toggle="buttons-radio">
                    <button class="btn btn-primary">左</button>
                    <button class="btn btn-primary">中</button>
                    <button class="btn btn-primary">右</button>
                  </div>
               </td>
             </tr>
            </tbody>
          </table>
          <hr>
          <h2>使用 bootstrap-button.js</h2>
          <p>通过javascript触发按钮：</p>
          <pre class="prettyprint linenums">$('.tabs').button()</pre>
            <h3>标记</h3>
          <p>
	    Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
	  </p>
<pre class="prettyprint linenums">
&lt;!-- Add data-toggle="button" to activate toggling on a single button --&gt;
&lt;button class="btn" data-toggle="button"&gt;单独开关&lt;/button&gt;

&lt;!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group --&gt;
&lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;
  &lt;button class="btn"&gt;左&lt;/button&gt;
  &lt;button class="btn"&gt;中&lt;/button&gt;
  &lt;button class="btn"&gt;右&lt;/button&gt;
&lt;/div&gt;

&lt;!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group --&gt;
&lt;div class="btn-group" data-toggle="buttons-radio"&gt;
  &lt;button class="btn"&gt;左&lt;/button&gt;
  &lt;button class="btn"&gt;中&lt;/button&gt;
  &lt;button class="btn"&gt;右&lt;/button&gt;
&lt;/div&gt;
</pre>
          <h3>方法</h3>
          <h4>$().button('toggle')</h4>
          <p>
	    切换按下状态。改变按钮的外观为已经激活(按下)的样子。
	  </p>
          <div class="alert alert-info">
            <strong>强调！</strong>
	    可以使用 <code>data-toggle</code> 属性自动设置按钮状态。
          </div>
          <pre class="prettyprint linenums">&lt;button class="btn" data-toggle="button" &gt;…&lt;/button&gt;</pre>
          <h4>$().button('loading')</h4>
          <p>
	    设置按钮为载入状态 - 按钮无效且将文本变成载入文本
	    载入文本应该设置在按钮的 <code>data-loading-text</code> 的属性中。
          </p>
          <pre class="prettyprint linenums">&lt;button class="btn" data-loading-text="正在载入..." &gt;...&lt;/button&gt;</pre>
          <div class="alert alert-info">
            <strong>强调！</strong>
            <a href="https://github.com/twitter/bootstrap/issues/793">Firefox在页面载入时会保持按钮无效状态</a>。
	    变通方案是在按钮上应用 <code>autocomplete="off"</code> 。
          </div>
          <h4>$().button('reset')</h4>
          <p>
	    重置按钮状态 - 将按钮文字复原。
	  </p>
          <h4>$().button(string)</h4>
          <p>
	    重置按钮状态 - 将按钮文字变成为指定的文字。
	  </p>
<pre class="prettyprint linenums">&lt;button class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt;
&lt;script&gt;
  $('.btn').button('complete')
&lt;/script&gt;</pre>
        </div>
      </div>
    </section>



    <!-- Collapse
    ================================================== -->
    <section id="collapse">
      <div class="page-header">
        <h1>折叠 <small>bootstrap-collapse.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <h3>折叠介绍</h3>
          <p>
	    为可折叠的组件(比如手风琴式应用，导航栏)提供基本的样式和灵活的支持。
	  </p>
          <a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">下载文件</a>
        </div>
        <div class="span9 columns">
          <h2>手风琴式应用的例子</h2>
          <p>
	    使用折叠插件构造手风琴式的边栏：
	  </p>

          <div class="accordion" id="accordion2">
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="javascript.html#collapseOne">
                  国土问题
                </a>
              </div>
              <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner">
		  前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
                </div>
              </div>
            </div>
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="javascript.html#collapseTwo">
                  门票问题
                </a>
              </div>
              <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner">
		  目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。
                </div>
              </div>
            </div>
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="javascript.html#collapseThree">
                  超生罚款
                </a>
              </div>
              <div id="collapseThree" class="accordion-body collapse">
                <div class="accordion-inner">
		  学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成“社会抚养费”。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。
                </div>
              </div>
            </div>
          </div>


          <hr>
          <h2>使用 bootstrap-collapse.js</h2>
          <p>通过javascript启用：</p>
          <pre class="prettyprint linenums">$(".collapse").collapse()</pre>
          <h3>选项</h3>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 100px;">名称</th>
               <th style="width: 50px;">类型</th>
               <th style="width: 50px;">默认</th>
               <th>描述</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>parent</td>
               <td>选择器(selector)</td>
               <td>false</td>
               <td>
		 如果指定了选择器，那么在显示折叠顶时，所有被选取的元素集合中的可折叠项都被关闭（与传统的手风琴应用相似）。
	       </td>
             </tr>
             <tr>
               <td>toggle</td>
               <td>布尔值</td>
               <td>true</td>
               <td>
		 切换可折叠元素
	       </td>
             </tr>
            </tbody>
          </table>
          <h3>标记</h3>
          <p>
	    只要在元素上添加 <code>data-toggle="collapse"</code> 和 <code>data-target</code> 就能自动变成可折叠的。
	     <code>data-target</code> 属性接受一个css选择器，以选取元素添加折叠。
	     一定要在折叠元素上添加 <code>.collapse</code> 。如果要默认某折叠元素是打开的，只要添加 <code>.in</code> 。
	  </p>
          <pre class="prettyprint linenums">
&lt;button class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;
  简单手风琴效果
&lt;/button&gt;

&lt;div id="demo" class="collapse in"&gt; … &lt;/div&gt;</pre>
          <div class="alert alert-info">
            <strong>强调！</strong>
	    若要对某个折叠控件添加手风琴风格的分组管理，就要添加 <code>data-parent="#selector"</code> 。详见上面的演示。
          </div>
          <h3>方法</h3>
          <h4>.collapse(options)</h4>
          <p>
	    把内容元素转换为一个可折叠组件。接受一个 <code>object</code> 对象做为可选参数。
<pre class="prettyprint linenums">
$('#myCollapsible').collapse({
  toggle: false
})</pre>
          <h4>.collapse('toggle')</h4>
          <p>
	    切换一个可折叠元素的状态：显示还是隐藏。
	  </p>
          <h4>.collapse('show')</h4>
          <p>
	    显示一个可折叠元素。
	  </p>
          <h4>.collapse('hide')</h4>
          <p>
	    隐藏一个可折叠元素。
	  </p>
          <h3>事件</h3>
          <p>
	    Bootstrap的折叠类扩展了一组事件，可以介入折叠的某些功能实现。
          </p>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 150px;">事件</th>
               <th>描述</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>show</td>
               <td>
		 该事件在调用 <code>show</code> 实例方法时立刻触发。
	       </td>
             </tr>
             <tr>
               <td>shown</td>
               <td>
		 该事件在可折叠元素已经呈现给用户后触发（等待CSS过渡效果完成）。
	       </td>
             </tr>
             <tr>
               <td>hide</td>
               <td>
		 该事件在调用 <code>hide</code> 方法时立刻触发。
               </td>
             </tr>
             <tr>
               <td>hidden</td>
               <td>
		 该事件在可折叠元素已经在用户面前完全隐藏后触发（等待CSS过渡效果完成）。
	       </td>
             </tr>
            </tbody>
          </table>

<pre class="prettyprint linenums">
$('#myCollapsible').on('hidden', function () {
  // 做点hidden之后的事情
})</pre>
        </div>
      </div>
    </section>



     <!-- Carousel
    ================================================== -->
    <section id="carousel">
      <div class="page-header">
        <h1>轮播 <small>bootstrap-carousel.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <h3>滑动介绍</h3>
          <p>
	    一个创建跑马灯效果，循环展示元素的通用插件。
	  </p>
          <a href="assets/js/bootstrap-carousel.js" target="_blank" class="btn">下载文件</a>
        </div>
        <div class="span9 columns">
          <h2>轮播的例子</h2>
          <p>观察下面的幻灯片</p>
          <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
                <div class="carousel-caption">
                  <h4>即使杀光所有报晓的公鸡，天，还是会亮的</h4>
                  <p>
		    @shifeike: 昨天是李尚平被枪杀10周年，我发的那条纪念微博，成为我的新浪微博账号最后一条微博。这个2010年1月为反对红中抢笔而注册的微博，两年多时间里发了14538条微博，加上被删除的差不多近200万字，积累了96269条粉丝，自此灰飞烟灭。
		  </p>
                </div>
              </div>
              <div class="item">
                <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
                <div class="carousel-caption">
                  <h4>如果人民不欢迎我们，就该我们下台了</h4>
                  <p>
		    【胡耀邦语录】①历史是混不过去的。②民主、自由、平等、博爱等观念是人类精神的一大解放。③如果人民不欢迎我们，就该我们下台了。④不懂的不要装懂，不通的不要装通，不服的不要装服。⑤中国的出路是民主和科学。⑥一个精神上、组织上被禁锢被压制的不自由民族怎么可能与其他国家进行自由竞争呢？
		  </p>
                </div>
              </div>
              <div class="item">
                <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
                <div class="carousel-caption">
                  <h4>国家像需要空气一样需要变革</h4>
                  <p>
		    据戈尔巴乔夫基金会新闻处通报，俄总统梅德韦杰夫今天向前苏联总统戈尔巴乔夫颁发圣徒安德烈·佩尔沃兹万内勋章。戈尔巴乔夫在受勋时表示感谢，并称很激动。他坦言，对自己做过的事情问心无愧。他强调，他进行改革不是为了赢得敬重和荣誉，而是因为认识到，“国家像需要空气一样需要变革”。他承认犯过错误，并至今还在为这些错误而烦恼。但他认为：“短短几年所走过的路，使专制的过去永远成为了历史。”
		  </p>
                </div>
              </div>
            </div>
            <a class="left carousel-control" href="javascript.html#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="right carousel-control" href="javascript.html#myCarousel" data-slide="next">&rsaquo;</a>
          </div>
          <div class="alert alert-info">
            <strong>强调！</strong>
	    实现轮播时，请移除我们提供的图片，替换为你自己的。
          </div>
          <hr>
          <h2>使用 bootstrap-carousel.js</h2>
          <p>通用javascript调用：</p>
          <pre class="prettyprint linenums">$('.carousel').carousel()</pre>
          <h3>选项</h3>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 100px;">名称</th>
               <th style="width: 50px;">类型</th>
               <th style="width: 50px;">默认</th>
               <th>描述</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>interval</td>
               <td>数字</td>
               <td>5000</td>
               <td>The amount of time to delay between automatically cycling an item.</td>
             </tr>
             <tr>
               <td>pause</td>
               <td>字符串</td>
               <td>"hover"</td>
               <td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
             </tr>
            </tbody>
          </table>
          <h3>标记</h3>
          <p>
	    可以使用data-属性提供前后翻页控件，如下：
	  </p>
<pre class="prettyprint linenums">
&lt;div id="myCarousel" class="carousel"&gt;
  &lt;!-- Carousel items --&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;div class="active item"&gt;…&lt;/div&gt;
    &lt;div class="item"&gt;…&lt;/div&gt;
    &lt;div class="item"&gt;…&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Carousel nav --&gt;
  &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
  &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
&lt;/div&gt;
</pre>
          <h3>方法</h3>
          <h4>.carousel(options)</h4>
          <p>
	    初始化轮播组件，接受一个 <code>object</code> 做为可选参数并开始循环播环。
	  </p>
<pre class="prettyprint linenums">
$('.carousel').carousel({
  interval: 2000
})
</pre>
          <h4>.carousel('cycle')</h4>
          <p>
	    从左向右循环播放。
	  </p>
          <h4>.carousel('pause')</h4>
          <p>
	    中止播放。
	  </p>
          <h4>.carousel(number)</h4>
          <p>
	    播放到某个特定的帧(与数组类似，从0开始计数)。
	  </p>
          <h4>.carousel('prev')</h4>
          <p>
	    回到上一帧。
	  </p>
          <h4>.carousel('next')</h4>
          <p>
	    回到下一帧。
	  </p>
          <h3>事件</h3>
          <p>
	    Bootstrap的轮播类提供了两个事件以介入轮播功能。
	  </p>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 150px;">事件</th>
               <th>描述</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>slide</td>
               <td>
		 该事件在调用 <code>slide</code> 实例方法时立刻触发。
	       </td>
             </tr>
             <tr>
               <td>slid</td>
               <td>
		 该事件在轮播项切换效果完成之后触发。
	       </td>
             </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>



    <!-- Typeahead
    ================================================== -->
    <section id="typeahead">
      <div class="page-header">
        <h1>输入提醒 <small>bootstrap-typeahead.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <h3>输入提醒介绍</h3>
          <p>
	    简单，易于拓展，可迅速地为表单中的文本输入框创建优雅的提醒。
	  </p>
          <a href="assets/js/bootstrap-typeahead.js" target="_blank" class="btn">下载文件</a>
        </div>
        <div class="span9 columns">
          <h2>例子</h2>
          <p>
	    在下面的输入框键入字符，观察提醒列表。
	  </p>
          <div class="well">
            <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
          </div>
          <hr>
          <h2>使用 bootstrap-typeahead.js</h2>
          <p>通过javascript调用输入提醒：</p>
          <pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
          <h3>选项</h3>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 100px;">名称</th>
               <th style="width: 50px;">类型</th>
               <th style="width: 100px;">默认</th>
               <th>描述</th>
             </tr>
            </thead>
            <tbody>
              <tr>
               <td>source</td>
               <td>数组</td>
               <td>[ ]</td>
               <td>用于查询的数据源。</td>
             </tr>
             <tr>
               <td>items</td>
               <td>数字</td>
               <td>8</td>
               <td>下拉列表中的最多显示个数。</td>
             </tr>
             <tr>
               <td>matcher</td>
               <td>函数</td>
               <td>不区分大小写</td>
               <td>
		 该matcher函数用于决定某个查询是否匹配某个项。
		 它接受唯一一个参数， <code>item</code> ，用于测试是否符合查询。
		 通过 <code>this.query</code> 访问当前查询，如果匹配查询，就返回一个布尔值 <code>true</code> 。
             </tr>
             <tr>
               <td>sorter</td>
               <td>函数</td>
               <td>精确匹配，<br>区分大小写，<br>不区分大小写</td>
               <td>
		 该函数用来排序自动完成的结果。
		 它接受唯一一个参数 <code>items</code> ，还拥有输入提醒的范围。使用 <code>this.query</code> 引用当前查询。
	       </td>
             </tr>
             <tr>
               <td>highlighter</td>
               <td>函数</td>
               <td>高亮所有默认的匹配</td>
               <td>
		 该函数用来高亮自动完成的结果。
		 它接受唯一一个参数 <code>items</code> ，还拥有输入提醒的范围。应该返回html。
	       </td>
             </tr>
            </tbody>
          </table>

          <h3>标记</h3>
          <p>使用data-属性为一个元素加入输入提醒功能。</p>
<pre class="prettyprint linenums">
&lt;input type="text" data-provide="typeahead"&gt;
</pre>
          <h3>方法</h3>
          <h4>.typeahead(options)</h4>
          <p>使用输入提醒初始化一个输入框。</p>
        </div>
      </div>
    </section>

     <!-- Footer
      ================================================== -->
      <footer class="footer">
        <p class="pull-right"><a href="javascript.html#">回到顶端</a></p>
        <p>我们倾注世间之爱于设计与创作 <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>，由<a href="http://weibo.com/tvlikedev">Tvlike.me/TV来客开发者</a>翻译</p>
        <p>开源依照 <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a> 发布。 文档依照 <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a> 发布。</p>
        <p>Icons取自 <a href="http://glyphicons.com">Glyphicons Free</a>，授权依照 <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>。</p>
      </footer>

    </div><!-- /container -->



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
    <script src="assets/js/application.js"></script>
    <script src="assets/js/customize.js"></script>


  </body>
</html>
